<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="listQuery.forddate"
          type="daterange"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="完成时间">
        <el-date-picker
          v-model="listQuery.foverdate"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="单据编号">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="单据状态">
        <el-select v-model="listQuery.fbillstate" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="受理人员">
        <el-select v-model="listQuery.frecuser" placeholder="请选择">
          <el-option
            v-for="item in getListSpeakerId"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="委托单位">
        <el-select v-model="listQuery.fsupno" placeholder="请选择">
          <el-option
            v-for="item in supplist"
            :key="item.fsupno"
            :label="item.fsupname"
            :value="item.fsupno"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          round
          size="medium"
          class="filter-item"
          @click="getList"
          :style="{ background: buttonColor.lookup, color: buttonColor.color }"
          >查找</el-button
        >
        <el-button
          :style="{ background: buttonColor.import, color: buttonColor.color }"
          round
          size="medium"
          @click="handleUpload"
          >导入</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 查询结果 -->
    <el-table
      :height="buttonColor.clientHeight"
      v-loading="listLoading"
      :data="list"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      :header-cell-style="tableColor"
    >
      <el-table-column
        align="center"
        :width="buttonColor.operationThree"
        label="操作"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <div class="operationButton">
            <div
              :style="{ color: buttonColor.delete, cursor: 'pointer' }"
              @click="Delete(scope.row)"
            >
              <img src="../../../../public/images/del.png" />
              删除
            </div>
            <div
              :style="{ color: buttonColor.examine, cursor: 'pointer' }"
              @click="Update(scope.row)"
            >
              <img src="../../../../public/images/examine.png" />
              签名
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="序号" type="index" />
      <el-table-column align="left" width="200" label="单号" prop="fbillno" />
      <el-table-column align="left" label="委托人" prop="forduser" />
      <el-table-column
        align="left"
        label="申请时间"
        prop="forddate"
        width="200"
      >
        <template slot-scope="scope">
          {{ $moment(scope.row.forddate).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="完成时间"
        prop="foverdate"
        width="200"
      >
        <template slot-scope="scope">
          {{ $moment(scope.row.foverdate).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="受理人" prop="frecuser" />
      <el-table-column
        align="left"
        label="受理时间"
        prop="frecdate"
        width="200"
      >
        <template slot-scope="scope">
          {{ $moment(scope.row.frecdate).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="品项数" prop="fitemcount" />
      <el-table-column align="left" label="总件数" prop="fpiececount" />
      <el-table-column align="left" label="质检费用" prop="ftotalamt" />
      <el-table-column align="left" label="单据状态" prop="fbillstate" />
      <el-table-column align="left" label="备注" prop="fexplanation" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 导出弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="uploadVisible"
      width="auto"
    >
      <template slot="title">
        <div :style="exportColor">样品分类</div>
      </template>
      <div
        style="
          width: 300px;
          height: 200px;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <el-upload
          :on-success="uploadFileSuccess"
          :headers="headers"
          :action="uploadPath2"
          :data="{ tableName: 'Import_i_ts_good_info' }"
          :show-file-list="false"
          class="filter-item"
          style="margin-top: 20px"
          accept=".xlsx"
        >
          <el-button
            :style="{
              background: buttonColor.import,
              color: buttonColor.color,
            }"
            round
            size="medium"
            icon="el-icon-upload"
            >导入</el-button
          >
        </el-upload>
        <div style="margin-top: 30px; text-decoration: underline">
          <a :href="downUrl" style="color: blue">模板文件下载</a>
        </div>
      </div>
    </el-dialog>
    <DataFrom ref="DataFrom" :getListSpeakerId="getListSpeakerId" />
  </div>
</template>
  
<script>
import {
  tableColor,
  titleColor,
  exportColor,
  buttonColor,
} from "@/filters/index";
import { listtsSupplier } from "@/api/tsSupplier";
import DataFrom from "./DataFrom";
import { uploadPath2 } from "@/api/area";
import { list, Delete } from "@/api/sample/inspection";
import { getListArea } from "@/api/area";
import Pagination from "@/components/Pagination";
import { getApiUrl } from "@/utils/request";
import { getToken } from "@/utils/auth";
export default {
  name: "unit",
  components: { Pagination, DataFrom },
  data() {
    return {
      tableColor,
      uploadPath2,
      titleColor,
      buttonColor,
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false,
      showSig: true,
      dialogVisiblesig: false,
      getListSpeakerId: [],
      exportColor,
      uploadVisible: false,
      listLoading: false,
      list: [],
      list2:[],
      options: [
        { value: 1, label: "待提交" },
        { value: 2, label: "已提交" },
        { value: 8, label: "已作废" },
        { value: 0, label: "全部" },
      ],
      downUrl: null,
      total: 0,
      supplist: [],
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        forddate: [this.$moment(new Date()).format("YYYY-MM-01"), new Date()],
        foverdate: new Date(),
        fsupno: undefined,
        fbillstate: 0,
        frecuser: undefined,
      },
    };
  },
  computed: {
    headers() {
      return {
        Authorization: getToken(),
      };
    },
  },
  created() {
    this.downUrl = getApiUrl() + "xlsx/1-2样品分类.xlsx";
    this.getList();
    this.getuser();
    this.getSupplier();
  },
  methods: {
    //供应商资料
    getSupplier() {
      var data = {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
      };
      listtsSupplier(data)
        .then((res) => {
          this.supplist = res.data.data.list;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    //列表
    getList() {
      list(this.listQuery).then((res) => {
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    //点击编辑
    Update(row) {
      // if (row.fbillstate != 5) {
      //   this.$notify.error({
      //     title: "失败",
      //     message: "只能修改状态为5的单据",
      //   });
      //   return;
      // }
      // this.dialogVisiblesig = true;
      // this.list2=[];
      // this.list2.push(row);
      this.$refs.DataFrom.opentabs(row);
    },
    //点击新增
    opencreate() {
      this.$refs.DataFrom.opentabs();
    },
    //人员
    getuser() {
      getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo })
        .then((response) => {
          this.getListSpeakerId = response.data.data.list;
        })
        .catch(() => {
          this.getListSpeakerId = [];
        });
    },
    //删除
    Delete(row) {
      Delete(row)
        .then((res) => {
          this.$notify.success({
            title: "成功",
            message: "删除资料成功",
          });
          this.getList();
        })
        .catch((res) => {
          this.$notify.error({
            title: "失败",
            message: "删除资料失败",
          });
        });
    },
    //导入
    handleUpload() {
      this.uploadVisible = true;
    },
    //
    uploadFileSuccess: function (response) {
      this.uploadVisible = false;
      this.$notify.success({
        title: "导入",
        dangerouslyUseHTMLString: true,
        message: response.data,
      });
    },
    // 供应商
    formatfsupno: function (row, column) {
      if (this.list.length > 0) {
        for (let i = 0; i < this.list.length; i++) {
          if (row.fparentno === this.list[i].fclassstno) {
            return this.list[i].fclassstname;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 清空画布
    handleReset() {
      this.resultImg = "";
      this.showSig = true;
      this.$nextTick(() => {
        this.$refs.esign.reset();
      });
    },
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          if (res) {
            this.showSig = false;
            this.resultImg = res;
          }
        })
        .catch((err) => {
          this.$message({
            message: "请签名",
            type: "warning",
          });
        });
    },
  },
};
</script>
<style>
.sigbut{
  margin: 20px 0;
}
.online-sig{
  border: 1px solid #999;
}
</style>
  